<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <!-- 按钮部分 -->
        <el-row>
          <el-col>
            <el-button
              type="primary"
              size="mini"
              @click="$router.push('/questions/new')"
            >{{$t(`question.newadd`)}}</el-button>
            <el-button type="danger" size="mini">{{$t(`question.manyadd`)}}</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="6">
            学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;科:
            <el-select v-model="searchForm.subjectID" placeholder="请选择" class="wd">
              <el-option
                v-for="item in subjectIDList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            难&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;度:
            <el-select v-model="searchForm.difficulty" placeholder="请选择" class="wd">
              <el-option
                v-for="item in difficultyList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            试题类型:
            <el-select v-model="searchForm.questionType" placeholder="请选择" class="wd">
              <el-option
                v-for="item in questionTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;签:
            <el-select v-model="searchForm.tags" placeholder="请选择" class="wd">
              <el-option
                v-for="item in tagsList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="6">
            城&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;市:
            <el-select
              v-model="searchForm.province"
              placeholder="选城市"
              style="width:85px;"
              @change="searchForm.city=''"
            >
              <el-option v-for="(item,k) in provinces()" :key="k" :label="item" :value="item"></el-option>
            </el-select>
            <el-select v-model="searchForm.city" placeholder="选区县" style="width:85px;">
              <el-option
                v-for="(item,k) in citys(searchForm.province)"
                :key="k"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            关&nbsp;键&nbsp;字:
            <el-input type="text" v-model="searchForm.keyword" class="wd"></el-input>
          </el-col>
          <el-col :span="6">
            题目备注:
            <el-select v-model="searchForm.remarks" placeholder="请选择" class="wd"></el-select>
          </el-col>
          <el-col :span="6">
            企业简称:
            <el-select v-model="searchForm.shortName" placeholder="请选择" class="wd"></el-select>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="6">
            方&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向:
            <el-select v-model="searchForm.direction" placeholder="请选择" class="wd">
              <el-option v-for="(item,k) in directionList" :key="k" :label="item" :value="item"></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            录&nbsp;入&nbsp;人:
            <el-select v-model="searchForm.creatorID" placeholder="请选择" class="wd">
              <el-option
                v-for="item in creatorIDList"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            目&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录:
            <el-select v-model="searchForm.catalogID" placeholder="请选择" class="wd">
              <el-option
                v-for="item in catalogIDList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-button size="mini">清除</el-button>
            <el-button type="primary" size="mini">搜索</el-button>
          </el-col>
        </el-row>

        <!-- 题库列表展示el-table/el-table-column -->
        <el-table :data="questionList" style="width:100%">
          <!-- type="index" 设置当前的列为序号 1/2/3/4... 序号列不用设置prop-->
          <el-table-column label="序号" type="index" width="60"></el-table-column>
          <el-table-column label="试题编号" prop="number"></el-table-column>
          <el-table-column label="学科" prop="subject"></el-table-column>

          <el-table-column :formatter="questionTypeFMT" label="题型" prop="questionType"></el-table-column>

          <el-table-column label="题干" prop="question"></el-table-column>
          <el-table-column label="录入时间" prop="addDate" width="170">
            <template slot-scope="stData">
              <!-- 过滤器使用可以传递参数 -->
              {{stData.row.addDate | parseTimeByString}}
              <!--{{stData.row.addDate | parseTimeByString('{y}-{m}-{d}')}} 年月日-->
            </template>
          </el-table-column>
          <el-table-column label="难度" :formatter="difficultyFMT" prop="difficulty"></el-table-column>
          <el-table-column label="录入人" prop="creator"></el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="stData">
              <a href="#">预览</a>
              <a href="#">修改</a>
              <a href="#" @click.prevent="del(stData.row)">删除</a>
              <a href="#">加入精选</a>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页效果 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchForm.page"
          :page-sizes="[3,5,10,20]"
          :page-size="searchForm.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tot"
        ></el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
//题库列表,删除题库
import { list, remove } from '@/api/hmmm/questions.js'
//城市-区县
import { provinces, citys } from '@/api/hmmm/citys.js'
//二级目录
import { simple as simpleDirectorys } from '@/api/hmmm/directorys.js'
//录入人
import { simple as simpleUsers } from '@/api/base/users.js'
//标签
import { simple as simpleTags } from '@/api/hmmm/tags.js'
import {
  direction as directionList,
  difficulty as difficultyList,
  questionType as questionTypeList
} from '@/api/hmmm/constants.js'
import { simple } from '@/api/hmmm/subjects.js'

export default {
  name: 'QuestionsList',
  watch: {
    // 对 searchForm 成员做深度监听
    // searchForm内部的成员发生变化都可以被感知
    searchForm: {
      handler: function(newV) {
        // 根据变化后的条件重新获得题库列表
        this.getQuestionList()
      },
      deep: true
    }
  },
  data() {
    return {
      questionList: [], //题库列表
      catalogIDList: [], //目录
      creatorIDList: [], //录入人
      tagsList: [], //标签

      directionList, //方向，简单成员赋值
      difficultyList,
      questionTypeList,
      subjectIDList: [],
      tot: 0, // 测试总条数
      searchForm: {
        page: 1, // 默认当前页码
        pagesize: 3, // 每页显示条数
        subjectID: '',
        difficulty: '',
        questionType: '',
        tags: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: ''
      }
    }
  },
  created() {
    //题库列表
    this.getQuestionList()
    //目录
    this.getCatalogIDList()
    //录入人
    this.getCreatorIDList()
    //标签
    this.getTagsList()
    //获取学科列表
    this.getSubjectIDList()
  },
  methods: {
    provinces,
    citys,
    // 分页-每页条数变化的回调处理
    handleSizeChange(val) {
      this.searchForm.pagesize = val
    },
    // 分页-当前页码变化
    handleCurrentChange(val) {
      this.searchForm.page = val
    },
    // 删除试题
    del(question) {
      // 确认框
      this.$confirm('确认要删除该试题么？', '删除', {
        configButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const result = await remove(question)
          //成功提示
          this.$message.success('删除成功！')
          //数据刷新
          this.getQuestionList()
        })
        .catch(() => {
          //取消逻辑
        })
    },
    // 数字转汉字
    difficultyFMT(row, column, cellValue) {
      return this.difficultyList[cellValue - 1].label
    },
    //对 题型数据 做二次更新
    questionTypeFMT(row, column, cellValue, index) {
      return this.questionTypeList[cellValue - 1].label
    },
    //题库列表
    async getQuestionList() {
      const result = await list(this.searchForm)
      this.questionList = result.data.items
      // 接收总条数信息
      this.tot = result.data.counts
    },
    //目录
    async getCatalogIDList() {
      const result = await simpleDirectorys()
      this.catalogIDList = result.data
    },
    //获取录入人
    async getCreatorIDList() {
      const result = await simpleUsers()
      this.creatorIDList = result.data
    },
    //获取标签
    async getTagsList() {
      const result = await simpleTags()
      this.tagsList = result.data
    },
    //获取学科列表
    async getSubjectIDList() {
      const result = await simple()
      this.subjectIDList = result.data
    }
  }
}
</script>

<style scoped>
.wd {
  width: 160px;
}
.el-row {
  margin-top: 20px;
}
/**分页样式 */
.el-pagination {
  margin-top: 15px;
}
</style>
